<template>
  <div class="login-container">
    <div class="box">
      <div
        id="map"
        ref="myEchart"
        :style="{ height: '800px', width: '100%' }"
      />
    </div>
  </div>
</template>
<script>
// import "../assets/henan1";
//   import JSON from 'echarts/map/json/province/henan.json';
// import "./assets/beijing.js";
import * as echarts from 'echarts'
const henanJson = require('./assets/henan.json')
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.init()
  },
  methods: {
    init(data) {
      const myChart = echarts.init(document.getElementById('map'))
      echarts.registerMap('henan', henanJson)
      const option = {
        title: {
          text: '地图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            if (!params.value) {
              return '该地区暂无访问量'
            }
            return (
              params.seriesName +
              '<br />' +
              params.name +
              '：' +
              params.value +
              '张'
            )
          },
          confine: true
        },
        visualMap: {
          min: 0,
          max: 100,
          text: ['高', '低'],
          realtime: false,
          calculable: true,
          itemWidth: 10,
          itemHeight: 70,
          inRange: {
            // color: ["#121122", "rgba(3,4,5,0.4)", "red"],
          },
          itemStyle: {
            normal: {
              borderWidth: 0.5, // 区域边框宽度
              borderColor: '#009fe8', // 区域边框颜色
              areaColor: '#ffefd5' // 区域颜色
            },
            emphasis: {
              borderWidth: 0.5,
              borderColor: '#4b0082',
              areaColor: '#ffdead'
            }
          }
        },
        geo: {
          map: 'henan',
          aspectScale: 0.75, // 长宽比
          roam: false,
          show: true,
          silent: true,
          zlevel: 1,
          //   top: "10%",
          //   left: "20%",
          emphasis: { label: { show: true }},
          regions: [
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: '郑州市', // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                emphasis: { label: { show: true }},
                normal: {
                  opacity: 0.5, // 透明度
                  borderColor: '#acb159', // 省份界线颜色
                  borderWidth: 0.5, // 省份界线的宽度
                  areaColor: '#fb7209', // 城市颜色
                  label: {
                    show: true,
                    textStyle: {
                      color: '#444'
                    }
                  }
                }
              }
            },
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: '开封市', // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 0.5, // 透明度
                  borderColor: '#acb159', // 省份界线颜色
                  borderWidth: 0.5, // 省份界线的宽度
                  areaColor: '#cbbb33' // 整个省份的颜色
                }
              }
            },
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: '信阳市', // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 0.5, // 透明度
                  borderColor: '#acb159', // 省份界线颜色
                  borderWidth: 0.5, // 省份界线的宽度
                  areaColor: '#c71c1c' // 整个省份的颜色
                }
              }
            },
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: '驻马店市', // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 0.5, // 透明度
                  borderColor: '#acb159', // 省份界线颜色
                  borderWidth: 0.5, // 省份界线的宽度
                  areaColor: '#e67d29' // 整个省份的颜色
                }
              }
            },
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: '南阳市', // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 0.5, // 透明度
                  borderColor: '#e6731c', // 省份界线颜色
                  borderWidth: 0.5, // 省份界线的宽度
                  areaColor: '#e6741c' // 整个省份的颜色
                }
              }
            },
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: '周口市', // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 0.5, // 透明度
                  borderColor: '#e6731c', // 省份界线颜色
                  borderWidth: 0.5, // 省份界线的宽度
                  areaColor: '#d6a630' // 整个省份的颜色
                }
              }
            },
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: '平顶山市', // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 0.5, // 透明度
                  borderColor: '#e6731c', // 省份界线颜色
                  borderWidth: 0.5, // 省份界线的宽度
                  areaColor: '#e3a409' // 整个省份的颜色
                }
              }
            },
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: '漯河市', // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 0.5, // 透明度
                  borderColor: '#e6731c', // 省份界线颜色
                  borderWidth: 0.5, // 省份界线的宽度
                  areaColor: '#deb912' // 整个省份的颜色
                }
              }
            },
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: '许昌市', // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 0.5, // 透明度
                  borderColor: '#e6731c', // 省份界线颜色
                  borderWidth: 0.5, // 省份界线的宽度
                  areaColor: '#c79f09' // 整个省份的颜色
                }
              }
            },
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: '洛阳市', // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 0.5, // 透明度
                  borderColor: '#e6731c', // 省份界线颜色
                  borderWidth: 0.5, // 省份界线的宽度
                  areaColor: '#e8c605' // 整个省份的颜色
                }
              }
            },
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: '三门峡市', // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 0.5, // 透明度
                  borderColor: '#e6731c', // 省份界线颜色
                  borderWidth: 0.5, // 省份界线的宽度
                  areaColor: '#d2e60b' // 整个省份的颜色
                }
              }
            },
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: '济源市', // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 0.5, // 透明度
                  borderColor: '#e6731c', // 省份界线颜色
                  borderWidth: 0.5, // 省份界线的宽度
                  areaColor: '#eba01d' // 整个省份的颜色
                }
              }
            },
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: '新乡市', // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 0.5, // 透明度
                  borderColor: '#e6731c', // 省份界线颜色
                  borderWidth: 0.5, // 省份界线的宽度
                  areaColor: '#dea20d' // 整个省份的颜色
                }
              }
            },
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: '焦作市', // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 0.5, // 透明度
                  borderColor: '#e6731c', // 省份界线颜色
                  borderWidth: 0.5, // 省份界线的宽度
                  areaColor: '#d6b70d' // 整个省份的颜色
                }
              }
            },
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: '安阳市', // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 0.5, // 透明度
                  borderColor: '#e6731c', // 省份界线颜色
                  borderWidth: 0.5, // 省份界线的宽度
                  areaColor: '#c0900e' // 整个省份的颜色
                }
              }
            },
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: '鹤壁市', // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 0.5, // 透明度
                  borderColor: '#e6731c', // 省份界线颜色
                  borderWidth: 0.5, // 省份界线的宽度
                  areaColor: '#c3bf35' // 整个省份的颜色
                }
              }
            },
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: '濮阳市', // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 0.5, // 透明度
                  borderColor: '#e6731c', // 省份界线颜色
                  borderWidth: 0.5, // 省份界线的宽度
                  areaColor: '#c0900e' // 整个省份的颜色
                }
              }
            },
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: '商丘市', // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 0.5, // 透明度
                  borderColor: '#e6731c', // 省份界线颜色
                  borderWidth: 0.5, // 省份界线的宽度
                  areaColor: '#c0900e' // 整个省份的颜色
                }
              }
            }
          ],

          itemStyle: {
            // 设置地图的样式
            normal: {
              // areaColor: '#013C62', // 地图样色
              // shadowColor: '#182f68', // 阴影
              // shadowOffsetX: 0,
              // shadowOffsetY: 25
              borderColor: '#000404',
              borderWidth: 3,
              areaColor: {
                type: 'linear-gradient',
                x: 1000,
                y: 600,
                x2: 1000,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#0A155D' // 0%处颜色
                  },
                  {
                    offset: 1,
                    color: '#007Ac1'
                  }
                ],
                global: true // 缺省为 false
              },
              opacity: 1
            },
            emphasis: {
              show: false,
              areaColor: '#FF8420'
            }
          }
        },
        series: [
          {
            name: '',
            type: 'map',
            roam: false,
            show: true,
            silent: true,
            // zoom: 1.4,
            label: {
              show: false
            },
            mapType: 'henan', // 自定义扩展图表类型
            itemStyle: {
              // normal: {label: {show: true}},
              emphasis: { label: { show: true }},
              normal: {
                label: {
                  show: true,
                  textStyle: {
                    color: '#444'
                  }
                }
              }
            },
            data: []
          }
        ]
      }
      // option.title.text = data.title;
      // option.visualMap.max = data.max;
      // option.series[0].name = data.name;
      // option.series[0].data = data.data;

      myChart.setOption(option)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
